<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js"></script>
    <script src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 800px; height: 600px;"></div>
</body>

<script>

    var chart = echarts.init(document.getElementById("chart"));

    chart.showLoading();//加载数据前显示的动画效果

    $.ajax({

        url:"weibo.json",
        type:"get",
        async:true,
        dataType:"json",
        success :function(response){
            chart.hideLoading();
            console.log(response);

            Data = function (index) {
                data = response[index];
                var px = data[0] / 1000;
                var py = data[1] / 1000;
                var res = [[px, py]];
    
                for (var i = 2; i < data.length; i += 2) {
                    var dx = data[i] / 1000;
                    var dy = data[i + 1] / 1000;
                    var x = px + dx;
                    var y = py + dy;
                    res.push([x, y]);
                    px = x;
                    py = y;
    
                }
                return res;
            };

        chart.setOption({

            title:{
                text:"微博签到数据点亮中国",
                subtext:"From ThinkGIS",
                left:"center",
                top:"top",
                textStyle:{
                    color:"#fff"
                }
                },
            legend: {        //图例组件
                    left: 'left',
                    data: ['强', '中', '弱'],
                    textStyle: {
                         color: '#ccc'
                     }
                },
            geo: { //地理坐标系组件          
                    name: '强',
                    type: 'scatter',
                    map: 'china',
                    label: {    //图形上的文本标签，可用于说明图形的一些数据信息
                        emphasis: {    
                            show: false   //是否显示标签
                        }
                    },
                    itemStyle: {    //地图区域的多边形 图形样式。
                        normal: {
                            areaColor: '#323c48',   //地图区域的颜色
                            borderColor: '#111'
                        },
    
                        emphasis: {    //高亮状态下的多边形和标签样式。
                            areaColor: '#2a333d'
                        }
                    }
                 },

            series: [{              //系列列表
                    name: '弱',
                    type: 'scatter',    //散点（气泡）图
                    coordinateSystem: 'geo',  //使用地理坐标系
                    symbolSize: 1,     //标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
                    large: true,       //是否开启大数据量优化，在数据图形特别多而出现卡顿时候可以开启。
                    itemStyle: {       //图形样式
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(37, 140, 249, 0.8)',
                            color: 'rgba(37, 140, 249, 0.8)'
                        }
                    },

                    data: Data(0)

                }, {
                    name: '中',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(14, 241, 242, 0.8)',
                            color: 'rgba(14, 241, 242, 0.8)'
                        }
                    },
                    data: Data(1)

                }, {
                    name: '强',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbolSize: 1,
                    large: true,
                    itemStyle: {
                        normal: {
                            shadowBlur: 2,
                            shadowColor: 'rgba(255, 255, 255, 0.8)',
                            color: 'rgba(255, 255, 255, 0.8)'
                        }
                    },
                    data: Data(2)
                }]
            });
        }

    });

</script>
</html>